import React, { useRef } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { addPerson, selectPerson } from './slice';

export default function UserInfo() {
    const dispatch = useDispatch();
    // 得到其他redux里面的的全局状态
    // const number = useSelector(state => state.count.value);
    const persons = useSelector(selectPerson);
    const nameRef = useRef();
    const ageRef = useRef();
    const add = () => {
        const person = {
            name: nameRef.current.value,
            age: ageRef.current.value,
        };
        dispatch(addPerson(person));
        nameRef.current.value = null;
        ageRef.current.value = null;
    };
    return (
        <div>
            <hr />
            <h1>Person</h1>
            <form>
                姓名: <input ref={nameRef} />
                年龄: <input ref={ageRef} />
            </form>
            <button onClick={add}>添加</button>
            {persons.map((person, index) =>{
                return (
                    <ul key={index}>
                        <li>姓名: {person.name}</li>
                        <li>年龄: {person.age}</li>
                    </ul>
                );
            })}
        </div>
    );
}
